<template>
  <div>
    <c-select
      v-bind="$attrs"
      filterable
      :value="value"
      :loading="loading"
      :options="options"
      :props="props"
      @change="hangleChange"
    ></c-select>
  </div>
</template>

<script>
import { getDevice } from '@/credit/views/city/self/after/rfid/index'
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    farmId: {
      type: String,
      default: '',
    },
    queryId: {
      type: String,
      default: '',
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      props: {
        value: 'device',
        label: 'serviceLabel',
      },
      options: [],
      loading: false,
    }
  },
  computed: {
    tableId() {
      return this.queryId + this.farmId
    },
  },
  watch: {
    tableId: {
      handler: function () {
        this.getOptions()
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    getOptions() {
      this.loading = true
      getDevice({
        farmId: this.farmId,
        deviceType: 'VIDEO',
      })
        .then(res => {
          this.options = (res || []).map(item => {
            item.serviceLabel = item.device_name + '-' + item.place_name
            return item
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    hangleChange(val) {
      const select = this.options.find(item => item[this.props.value] === val) || {}
      this.$emit('change', val, { ...select })
    },
  },
}
</script>
<style lang="scss" scoped></style>
